<template>
    <div style="overflow: auto; height: 750px;width: 100%">
        <el-card class="post-box-card">
            <div slot="header" class="post-clearfix">
                <el-row  style="margin: 20px 0">
                    <el-col :span="3" :offset="1">
                        <span style="font-size: 24px;font-weight: bold">我的图书评论</span>
                    </el-col>
                    <el-col :span="8" :offset="12">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage4"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="filter.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </el-col>
                </el-row>
            </div>
            <el-card>
                <el-row  style="margin: 20px 0">
                    <el-col :span="2" :offset="1">
                        图书名称
                    </el-col>
                    <el-col :span="14" :offset="1">
                        评论内容
                    </el-col>
                    <el-col :span="3" :offset="1">
                        评论时间
                    </el-col>
                </el-row>
            </el-card>

            <div v-for="(item, idx) in listData" :key="idx"  style="padding: 3px 2px ">
                <el-card shadow="hover">
                    <el-row  style="margin: 20px 0">
                        <el-col :span="2" :offset="1">
                            <span>{{item.bookName}}</span>
                        </el-col>
                        <el-col :span="14"  :offset="1">
                            <span>{{item.content}}</span>
                        </el-col>
                        <el-col :span="3" :offset="1">
                            <span>{{item.createTime}}</span>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-card>

    </div>
</template>

<script>

    import  { getBookComments } from '../../../module/admin/book/bookComment';
    import { Message } from 'element-ui';
    export default {
        data () {
            return {
                listData: [],
                search:'',
                loading: true,
                visible2: false,
                filter: {
                    pageNum: 1,
                    pageSize: 10,
                },
                search:{
                    key: '',
                    value:'',
                },
                total: 0,
                currentPage4: 1,
            }
        },
        mounted () {
            let readerId = sessionStorage.getItem('readerId');
            if (null !== readerId) {
                this.readerId = readerId;
            }
            this.search.key='readerId';
            this.search.value = this.readerId;
            getBookComments(this);
        },
        methods: {
            handleSearchChange() {
                getBookComments(this);
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                getBookComments(this);
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
                getBookComments(this);
            },
            toCreate() {
                this.$router.push({
                    name: "admin-book-comment-create"
                })
            },
        }
    }
</script>


<style>
    body {
        font-family: Helvetica, sans-serif;
    }
    .toolbar {
        margin: 20px 0;
    }
    .search {
        width: 300px;
    }
</style>
